<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>商品详情页面</title>
<link rel="stylesheet"
	href="/wk1un2_electricity_digital/Backstage/layui/css/layui.css" />
	<style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
	<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" name="p_name" id="p_name"
					class="layui-input">
			</div>
			<label class="layui-form-label">商品状态</label>
						<div class="layui-input-inline" style="width: 120;">
							<select name="p_state" id="p_state" class="layui-input">
								<option value=''>请选择状态</option>
								<option value='1'>上架</option>
								<option value='2'>下架</option>
								
							</select>
						</div>
			<button class="layui-btn" id="search" data-type="reload">查询</button>
		</div>
	</div>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<!--数据表格-->
	<script type="text/html" id="toolbarDemo">
			<!--表头上面引入了一个添加商品的操作-->
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addUser">添加商品</button>
			</div>
		</script>
	<script type="text/html" id="barDemo">
			<!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	<!--检查js文件是否引入成功-->
	<script type="text/javascript"
		src="/wk1un2_electricity_digital/Backstage/layui/layui.js"></script>

	<script type="text/javascript"
		src="/wk1un2_electricity_digital/Backstage/js/jquery-3.4.1.min.js"></script>
  
  	 <script type="text/html" id="p_parcateTpl1">
      {{#  if(d.p_type == "5"){ }}
          <span style="color: #F581B1;">华为</span>
      {{#  } else if(d.p_type =="6"){ }}
          <span style="color: #1e9fff;">荣耀</span>
      {{#  } else if(d.p_type =="8"){ }}
          <span style="color: #08f55f;">华为matebook系列</span>
      {{#  }else if(d.p_type =="7"){ }}
          <span style="color: #08f55f;">荣耀时尚本系列</span>
      {{#  }else if(d.p_type =="10"){ }}
          <span style="color: #08f55f;">华为系列</span>
      {{#  }else if(d.p_type =="9"){ }}
          <span style="color: #08f55f;">荣耀系列</span>
      {{#  }else if(d.p_type =="11"){ }}
          <span style="color: #08f55f;">蓝牙耳机</span>
      {{#  }else if(d.p_type =="12"){ }}
          <span style="color: #08f55f;">智能音箱</span>
      {{#  } }}
  </script>
	<script>
	layui.use([ 'form','layer','jquery','table'], function() {
		var layer = layui.layer, $ = layui.jquery, form = layui.form,table=layui.table;
							var $ = layui.jquery;
							table
									.render({
										elem : '#test',
										toolbar : '#toolbarDemo',
										url : '/wk1un2_electricity_digital/Backstage/getAllProduct',
										where : {
										
											p_name:'',
											 p_state : ''
										},
										method : 'POST',
										cols : [ [ {
											type : "checkbox",
											fixed:'left',
											width : 50
										}, {
											field : 'p_id',
											width : 80,
											title : 'ID',
											fixed:'left',
											sort : true,
											align : "center"
										}, {
											field : 'p_name',
											width : 200,
											title : '商品名称',
											align : "center"
										}, {
											field : 'p_brand',
											width : 120,
											title : '品牌',
											align : "center"
										}, {
											field : 'pcat_name',
											width : 150,
											title : '商品所属分类',
											align : "center"
										}, {
											field : 'p_type',
											width : 200,
											title : '型号',
											templet : '#p_parcateTpl1',
											align : "center"
										},  {
											field : 'p_price',
											width : 200,
											title : '价格',
											align : "center"
										}, {
											field : 'p_url',
											width : 200,
											title : '地址',
											templet:"<div><img src='{{d.p_url}}'/></div>",
											align : "center"
										},{
											field : 'p_state',
											width : 100,
											title : '商品状态',
											 templet: '#switchTpl',
											align : "center"
										}, {
											field : 'p_memcapa',
											width : 120,
											title : '内存容量',
											sort : true,
											align : "center"
										}, {
											field : 'p_stocapa',
											width : 120,
											title : '储存容量',
											sort : true,
											align : "center"
										}, {
											field : 'p_size',
											width : 120,
											title : '屏幕尺寸',
											sort : true,
											align : "center"
										}, {
											field : 'p_pixel',
											width : 120,
											title : '像素',
											sort : true,
											align : "center"
										}, {
											field : 'p_resolution',
											width : 120,
											title : '分辨率',
											sort : true,
											align : "center"
										}, {
											field : 'p_corenum',
											width : 100,
											title : '核心数',
											align : "center"
										}, {
											field : 'p_networktype',
											width : 100,
											title : '网络类型',
											align : "center"
										}, {
											field : 'p_networkmodel',
											width : 100,
											title : '网络模式',
											align : "center"
										}, {
											field : 'p_cpumodel',
											width : 120,
											title : 'CPU型号',
											align : "center"
										}, {
											field : 'p_cpubrand',
											width : 120,
											title : 'CPU品牌',
											align : "center"
										}, {
											field : 'p_manufacturer',
											width : 120,
											title : '厂商',
											align : "center"
										}, {
											field : 'p_os',
											width : 120,
											title : '操作系统',
											align : "center"
										}, {
											field : 'ps_id',
											width : 120,
											title : '商品规格',
											align : "center"
										},{
											title : '操作',
											width : 150,
											toolbar : '#barDemo',
											fixed:'right',
											align : "center"
										} ] ],
										id : 'testReload',
										page : true

									});
					
							form.on('switch(p_stateDemo)', function(data) {
					              var p_state = this.checked ? 1 : 2;
					              var p_id = this.value;
					              $.ajax({
					            	  url :'/wk1un2_electricity_digital/Backstage/updateproductstate',
					                type : "get",
					                data : {
					                	p_state : p_state,
					                	p_id : p_id
					                },
					                success : function(d) {
					                  if (d.code == 1) {
					                    layer.msg("操作成功！");
					                  }else if (d.code == 2) {
					                    layer.msg("操作成功！");
					                  }else {
					                    layer.msg("操作失败！", {
					                      icon : 5
					                    });
					                  }
					                }
					              })
					            });
							//添加
							table.on('toolbar(test)', function(obj) {
								switch (obj.event) {
								case 'addUser':
									layer.open({
										type : 2,
										area : [ '500px', '500px' ],
										content : 'Product_add.jsp',
										title : '添加',
										end : function() {
											window.location.reload();
										}
									});
									break;
								}
								;
							});
							//删除
							//监听行工具事件
							table.on('tool(test)', function(obj) {
								if (obj.event === 'del') {
									layer.confirm('真的删除行么', function(index) {//删除弹框
										console.log('执行删除');
										console.log(obj.data);
										var url = '/wk1un2_electricity_digital/Backstage/deleteProduct';
										$.post(url, {
											"p_id" : obj.data.p_id,
											method : 'delete'
										}, function(data) {
											console.log(data);
											if (data.count > 0) {
												console.log('删除成功');
												window.location.reload();
											}
										}, "json");
									});
								} else if (obj.event === 'edit') {
									console.log(obj.data);
									layer.open({
										type : 2,
										area : [ '500px', '500px' ],
										content : 'Product_update.jsp',
										title : '编辑',//修改
										success : function(layero, index) {
											var body = layer.getChildFrame('body',index);
											body.contents().find("#p_id").val(obj.data.p_id);
											body.contents().find("#p_name").val(obj.data.p_name);
											body.contents().find("#p_brand").val(obj.data.p_brand);
											body.contents().find("#p_type").val(obj.data.p_type);
											body.contents().find("#p_price").val(obj.data.p_price);
											body.contents().find("#p_url").val(obj.data.p_url);
											body.contents().find("#p_state").val(obj.data.p_state);
											body.contents().find("#p_memcapa").val(obj.data.p_memcapa);
											body.contents().find("#p_stocapa").val(obj.data.p_stocapa);
											body.contents().find("#p_size").val(obj.data.p_size);
											body.contents().find("#p_pixel").val(obj.data.p_pixel);
											body.contents().find("#p_resolution").val(obj.data.p_resolution);
											body.contents().find("#p_corenum").val(obj.data.p_corenum);
											body.contents().find("#p_networktype").val(obj.data.p_networktype);
											body.contents().find("#p_networkmodel").val(obj.data.p_networkmodel);
											body.contents().find("#p_cpumodel").val(obj.data.p_cpumodel);
											body.contents().find("#p_cpubrand").val(obj.data.p_cpubrand);
											body.contents().find("#p_manufacturer").val(obj.data.p_manufacturer);
											body.contents().find("#p_os").val(obj.data.p_os);
											body.contents().find("#pcat_id").val(obj.data.pcat_id);
											body.contents().find("#ps_id").val(obj.data.ps_id);
										},
										end : function() {
											window.location.reload();
										}
									});
								}
							});
							$('#search').on('click', function() {
								var p_name = $("#p_name").val();
								var p_state = $("#p_state").val();
								table.reload('testReload', {//testReload,是上面渲染表格的id
									where : {//接口需要的两个请求参数
										'p_name' : p_name,
										'p_state' : p_state
									}
								});
							});
						});
					</script>
					<script type="text/html" id="switchTpl">
  <input type="checkbox" name="p_state" value="{{d.p_id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="p_stateDemo" {{ d.p_state == 1 ? 'checked' : '' }}>
</script>
</body>


</html>